<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>J+</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <style>
        #left {
            border: 1px solid white;
        }

        #right {
            border: 1px solid white;
        }

        #middle {
            /*border: 1px solid black;*/
            height: 500px;
        }

        #Form1 {
            /*border: 1px solid blue;*/
            height: 200px;
            text-align: center;
        }

        .text {
            padding-bottom: 10px;
            width: 250px;
        }

        .checkCode {
            width: 120px;
            margin-right: 3px;
        }

        #title {
            /*border: 1px solid red;*/
            width: 100%;
            height: 280px;
            text-align: center;
        }

        #title h1 {
            color: #E6E6E6;
            font-size: 200px;
            /*padding-left: 150px;*/
        }

        #title p {
            color: #686B6D;
            font-size: 20px;
            /*padding-left: 200px;*/
        }

        #bu {
            width: 250px;
            height: 30px;
        }

        #register {
            text-align: center;
        }

        #register a {
            color: #1E9FFF;
            font-size: 11px;
        }

        #register a:hover {
            color: #1E9FFF;
            font-size: 13px;
        }

        img {
            height: 42px;
        }
    </style>
</head>
<body>
<!--左边的-->
<div id="left" class="layui-col-sm4"></div>
<!--中间的-->
<div id="middle" class="layui-col-xs12 layui-col-sm4 layui-anim-up">
    <!--标题-->
    <div id="title">
        <h1>J+</h1>
        <P>欢迎使用J+</P>
    </div>
    <!--表单-->
    <div id="Form1" class="layui-anim-upbit">
        <form  action="${pageContext.request.contextPath}/login.do" id="from" method="post">
            <div class="layui-input-inline text">
                <input type="tel" name="username" placeholder="请输入用户名" class="layui-input">
            </div>
            <br>
            <div class="layui-input-inline text">
                <input type="tel" name="password" placeholder="请输入密码" class="layui-input">
            </div>
            <br>
            <%--<div class="layui-input-inline text checkCode">
                <input type="tel" name="code" placeholder="请输入验证码" class="layui-input">

            </div>--%>
            <%--<div class="layui-input-inline text checkCode">
                <img src="/checkCode" id="iamge">
            </div>--%>
            <br>
            <input type="submit" class= "layui-btn" id="bu">
        </form>
    </div>
    <!--注册-->
    <div id="register">
        <p><a href="#">忘记密码了?</a> | <a href="#">注册一个新账号</a></p>
    </div>
</div>
<!--右边的-->
<div id="right" class="layui-col-sm4"></div>

<script src="lib/layui/layui.js"></script>
<script>

    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        $(function () {
            $("#middle").fadeOut(10, "linear", function () {
            });
            $("#middle").fadeIn(1500, "swing", function () {
                layer.msg("欢迎使用J+")
            });

        });

    })

</script>
</body>
</html>